<template>
  <div class="question-choice">
    <!-- 卡片视图 -->
    <el-card>
      <!-- 新增试题按钮 -->
      <el-row>
        <div class="btn-wrap">
          <el-button
            icon="el-icon-edit"
            class=" dit-button"
            type="success"
            @click="$router.push('/questions/new')"
            ><span>新增试题</span>
          </el-button>
        </div>
      </el-row>
      <!-- /新增试题按钮 -->
      <!-- form表单 -->
      <el-form ref="queryInfoRef" :model="queryInfo">
        <!-- 第一行 -->
        <el-row :gutter="20">
          <!-- 学科选择器 -->

          <el-col :span="6">
            <el-form-item>
              <span class="text">学科</span>
              <!-- options数据源 -->
              <el-select v-model="queryInfo.subjectID" placeholder="请选择">
                <el-option
                  v-for="item in subjectlist"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                  @click.native="getDirectorysList(item.id)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- /学科选择器 -->

          <!-- 二级目录 -->

          <el-col :span="6">
            <el-form-item>
              <span class="text">二级目录</span>
              <el-select v-model="queryInfo.directoryName" placeholder="请选择">
                <el-option
                  v-for="item in directoryslist"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.directoryName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 二级目录 -->

          <!-- 标签 -->

          <el-col :span="6">
            <el-form-item>
              <span class="text">标签</span>
              <el-select v-model="queryInfo.tagName" placeholder="请选择">
                <el-option
                  v-for="item in tagslist"
                  :key="item.is"
                  :label="item.tagName"
                  :value="item.tagName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- /标签 -->
          <!-- 关键字 -->

          <el-col :span="6">
            <el-form-item>
              <span class="text">关键字</span>
              <el-input v-model="queryInfo.keyword"></el-input>
            </el-form-item>
          </el-col>

          <!-- /关键字 -->
        </el-row>
        <!-- /第一行 -->
        <!-- 第二行 -->
        <el-row :gutter="20">
          <!-- 试题类型 -->

          <el-col :span="6">
            <el-form-item>
              <span class="text">试题类型</span>
              <el-select v-model="queryInfo.questionType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in questionType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- /试题类型 -->
          <!-- 难度 -->

          <el-col :span="6">
            <el-form-item>
              <span class="text">难度</span>
              <el-select v-model="queryInfo.difficulty" placeholder="请选择">
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- /难度 -->
          <!-- 方向 -->

          <el-col :span="6">
            <el-form-item>
              <span class="text">方向</span>
              <el-select v-model="queryInfo.direction" placeholder="请选择">
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- /方向 -->
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item>
              <span class="text">录入人</span>
              <el-select v-model="queryInfo.creatorID" placeholder="请选择">
                <el-option
                  v-for="item in userlist"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- /录入人 -->
        </el-row>
        <!-- /第二行 -->
        <!-- 第三行 -->
        <el-row :gutter="20">
          <!-- 题目备注 -->

          <el-col :span="6">
            <el-form-item>
              <span class="text">题目备注</span>
              <el-form>
                <el-form-item>
                  <el-input v-model="queryInfo.remarks"></el-input>
                </el-form-item>
              </el-form>
            </el-form-item>
          </el-col>

          <!-- /题目备注 -->
          <!-- 企业简称 -->

          <el-col :span="6">
            <el-form-item>
              <span class="text">企业简称</span>
              <el-form>
                <el-form-item>
                  <el-input v-model="queryInfo.shortName"></el-input>
                </el-form-item>
              </el-form>
            </el-form-item>
          </el-col>

          <!-- /企业简称 -->
          <!-- 城市 -->

          <el-col :span="3">
            <el-form-item>
              <!--  企业所在地省份-->
              <span class="text">城市</span>
              <el-select v-model="queryInfo.province" placeholder="请选择">
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :label="item"
                  :value="item"
                  @click.native="getCitys(item)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--  /企业所在地省份-->
          <el-col :span="3">
            <el-form-item>
              <!-- 企业所在城市 -->
              <el-select v-model="queryInfo.city" placeholder="请选择">
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- /企业所在城市 -->

          <!-- /城市 -->
          <!-- 清除搜索按钮 -->

          <el-col :span="6">
            <el-form-item class="rightFormItem">
              <el-button @click="clearForm">清除</el-button>
              <el-button type="primary" @click="selectForm">搜索</el-button>
            </el-form-item>
          </el-col>

          <!-- /清除搜索按钮 -->
        </el-row>
        <!-- /第三行 -->
      </el-form>
      <!-- / form表单  -->

      <!-- tab栏 -->
      <el-row>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <!-- 全部 -->
          <el-tab-pane label="全部" name="4">
            <!-- 数据提示 -->
            <el-alert
              :title="'数据一共' + queryInfo.total + '条'"
              type="info"
              :closable="false"
              show-icon
            >
            </el-alert>
            <!-- /数据提示 -->
            <!-- 表格区域 -->
            <el-table :data="choicelist" border style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="120">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="120">
              </el-table-column>
              <el-table-column prop="questionType" label="题型" width="120">
                <template slot-scope="{ row }">
                  <span v-if="row.questionType === 1">单选</span>
                  <span v-else-if="row.questionType === 2">多选</span>
                  <span v-else>简单</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="120">
                <template slot-scope="{ row }">
                  <span v-html="row.question"></span>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="300">
                <template slot-scope="{ row }">
                  <span>{{ row.addDate | parseTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="难度" width="120">
                <template slot-scope="{ row }">
                  <span v-if="row.difficulty === 1">简单</span>
                  <span v-else-if="row.difficulty === 2">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120">
              </el-table-column>
              <el-table-column label="审核状态" width="120">
                <template slot-scope="{ row }">
                  <span>{{ chkType[row.chkState].label }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="120">
              </el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="120">
              </el-table-column>
              <el-table-column label="发布状态" width="120">
                <template slot-scope="{ row }">
                  <span>{{ publishType[row.publishState].label }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    @click="preivewClick(scope.row)"
                    type="text"
                    size="small"
                    >预览</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="checkClick(scope.row)"
                    :disabled="scope.row.chkState !== 0 ? true : false"
                    >审核</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    :disabled="scope.row.publishState === 0 ? true : false"
                    @click="
                      $router.push({
                        path: '/questions/new',
                        query: { id: scope.row.id }
                      })
                    "
                    >修改</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="publishClick(scope.row)"
                    >{{
                      scope.row.publishState === 0 ? "下架" : "上架"
                    }}</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="deleteClick(scope.row)"
                    :disabled="scope.row.publishState === 0 ? true : false"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- /表格区域 -->
          </el-tab-pane>
          <!-- /全部 -->
          <!-- 待审核 -->
          <el-tab-pane label="待审核" name="0">
            <!-- 数据提示 -->
            <el-alert
              :title="'数据一共' + queryInfo.total + '条'"
              type="info"
              :closable="false"
              show-icon
            >
            </el-alert>
            <!-- /数据提示 -->
            <!-- 表格区域 -->
            <el-table :data="choicelist" border style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="120">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="120">
              </el-table-column>
              <el-table-column prop="questionType" label="题型" width="120">
                <template slot-scope="{ row }">
                  <span v-if="row.questionType === 1">单选</span>
                  <span v-else-if="row.questionType === 2">多选</span>
                  <span v-else>简单</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="120">
                <template slot-scope="{ row }">
                  <span v-html="row.question"></span>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="300">
                <template slot-scope="{ row }">
                  <span>{{ row.addDate | parseTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="难度" width="120">
                <template slot-scope="{ row }">
                  <span v-if="row.difficulty === 1">简单</span>
                  <span v-else-if="row.difficulty === 2">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120">
              </el-table-column>
              <el-table-column label="审核状态" width="120">
                <template slot-scope="{ row }">
                  <span>{{ chkType[row.chkState].label }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="120">
              </el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="120">
              </el-table-column>
              <el-table-column label="发布状态" width="120">
                <template slot-scope="{ row }">
                  <span>{{ publishType[row.publishState].label }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    @click="preivewClick(scope.row)"
                    type="text"
                    size="small"
                    >预览</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="checkClick(scope.row)"
                    :disabled="scope.row.chkState !== 0 ? true : false"
                    >审核</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    :disabled="scope.row.publishState === 0 ? true : false"
                    @click="
                      $router.push({
                        path: '/questions/new',
                        query: { id: scope.row.id }
                      })
                    "
                    >修改</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="publishClick(scope.row)"
                    >{{
                      scope.row.publishState === 0 ? "下架" : "上架"
                    }}</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="deleteClick(scope.row)"
                    :disabled="scope.row.publishState === 0 ? true : false"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- /表格区域 -->
          </el-tab-pane>
          <!-- /待审核 -->
          <!-- 已审核 -->
          <el-tab-pane label="已审核" name="1">
            <!-- 数据提示 -->
            <el-alert
              :title="'数据一共' + queryInfo.total + '条'"
              type="info"
              :closable="false"
              show-icon
            >
            </el-alert>
            <!-- /数据提示 -->
            <!-- 表格区域 -->
            <el-table :data="choicelist" border style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="120">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="120">
              </el-table-column>
              <el-table-column prop="questionType" label="题型" width="120">
                <template slot-scope="{ row }">
                  <span v-if="row.questionType === 1">单选</span>
                  <span v-else-if="row.questionType === 2">多选</span>
                  <span v-else>简单</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="120">
                <template slot-scope="{ row }">
                  <span v-html="row.question"></span>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="300">
                <template slot-scope="{ row }">
                  <span>{{ row.addDate | parseTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="难度" width="120">
                <template slot-scope="{ row }">
                  <span v-if="row.difficulty === 1">简单</span>
                  <span v-else-if="row.difficulty === 2">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120">
              </el-table-column>
              <el-table-column label="审核状态" width="120">
                <template slot-scope="{ row }">
                  <span>{{ chkType[row.chkState].label }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="120">
              </el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="120">
              </el-table-column>
              <el-table-column label="发布状态" width="120">
                <template slot-scope="{ row }">
                  <span>{{ publishType[row.publishState].label }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    @click="preivewClick(scope.row)"
                    type="text"
                    size="small"
                    >预览</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="checkClick(scope.row)"
                    :disabled="scope.row.chkState !== 0 ? true : false"
                    >审核</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    :disabled="scope.row.publishState === 0 ? true : false"
                    @click="
                      $router.push({
                        path: '/questions/new',
                        query: { id: scope.row.id }
                      })
                    "
                    >修改</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="publishClick(scope.row)"
                    >{{
                      scope.row.publishState === 0 ? "下架" : "上架"
                    }}</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="deleteClick(scope.row)"
                    :disabled="scope.row.publishState === 0 ? true : false"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- /表格区域 -->
          </el-tab-pane>
          <!-- /已审核 -->
          <!--  已拒绝-->
          <el-tab-pane label="已拒绝" name="2">
            <!-- 数据提示 -->
            <el-alert
              :title="'数据一共' + queryInfo.total + '条'"
              type="info"
              :closable="false"
              show-icon
            >
            </el-alert>
            <!-- /数据提示 -->
            <!-- 表格区域 -->
            <el-table :data="choicelist" border style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150">
              </el-table-column>
              <el-table-column prop="subject" label="学科" width="120">
              </el-table-column>
              <el-table-column prop="catalog" label="目录" width="120">
              </el-table-column>
              <el-table-column prop="questionType" label="题型" width="120">
                <template slot-scope="{ row }">
                  <span v-if="row.questionType === 1">单选</span>
                  <span v-else-if="row.questionType === 2">多选</span>
                  <span v-else>简单</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="120">
                <template slot-scope="{ row }">
                  <span v-html="row.question"></span>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="300">
                <template slot-scope="{ row }">
                  <span>{{row.addDate | parseTimeByString}}</span>
                </template>
              </el-table-column>
              <el-table-column label="难度" width="120">
                <template slot-scope="{ row }">
                  <span v-if="row.difficulty === 1">简单</span>
                  <span v-else-if="row.difficulty === 2">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120">
              </el-table-column>
              <el-table-column label="审核状态" width="120">
                <template slot-scope="{ row }">
                  <span>{{ chkType[row.chkState].label }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="120">
              </el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="120">
              </el-table-column>
              <el-table-column label="发布状态" width="120">
                <template slot-scope="{ row }">
                  <span>{{ publishType[row.publishState].label }}</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    @click="preivewClick(scope.row)"
                    type="text"
                    size="small"
                    >预览</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="checkClick(scope.row)"
                    :disabled="scope.row.chkState !== 0 ? true : false"
                    >审核</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    :disabled="scope.row.publishState === 0 ? true : false"
                    @click="
                      $router.push({
                        path: '/questions/new',
                        query: { id: scope.row.id }
                      })
                    "
                    >修改</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="publishClick(scope.row)"
                    >{{
                      scope.row.publishState === 0 ? "下架" : "上架"
                    }}</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="deleteClick(scope.row)"
                    :disabled="scope.row.publishState === 0 ? true : false"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- /表格区域 -->
          </el-tab-pane>
          <!-- /已拒绝 -->
        </el-tabs>
      </el-row>
      <!-- /tab栏 -->
      <!-- 分页 -->
      <!-- :total
       总条目数 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes,  jumper"
        :total="queryInfo.total"
        background
      >
      </el-pagination>
      <!-- /分页 -->
    </el-card>
    <!-- /卡片视图 -->
    <!-- 预览对话框 -->
    <el-dialog title="题目预览" :visible.sync="questionDialogVisibleShow">
      <questions-preview :item="item" v-if="questionDialogVisibleShow"></questions-preview>
    </el-dialog>
    <!-- /预览对话框 -->
    <!-- 审核对话框 -->
    <el-dialog title="题目审核" :visible.sync="checkDialogVisible" width="30%">
      <questions-check
        v-if="checkDialogVisible"
        :checkDialogVisible.sync="checkDialogVisible"
        :rowID="rowID"
        @input="getChoiceList()"
      ></questions-check>
    </el-dialog>
    <!-- /审核对话框 -->
  </div>
</template>

<script>
import { list as getSubject } from '@/api/hmmm/subjects'
import { list as getDirectorys } from '@/api/hmmm/directorys'
import { list as getTags } from '@/api/hmmm/tags'
import {
  choice as getChoice,
  choicePublish,
  choiceAdd
} from '@/api/hmmm/questions'
import { list as getUsers } from '../../api/base/users'
import {
  questionType,
  difficulty,
  direction,
  chkType,
  publishType
} from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import QuestionsPreview from '../components/questions-preview'
import QuestionsCheck from '../components/questions-check'

export default {
  data () {
    return {
      // 精选题库
      queryInfo: {
        subjectID: '', // 学科
        directoryName: '', // 目录名称
        tagName: '', // 标签名称
        keyword: '', // 关键字
        difficulty: '', // 试题难度
        questionType: '', // 试题类型
        direction: '', // 试题方向
        // eslint-disable-next-line no-dupe-keys
        keyword: '', // 关键字
        creatorID: '', // 录入人
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        shortName: '', // 企业简称
        // eslint-disable-next-line no-tabs
        remarks: '', //	题目备注
        chkState: null, // 审核状态
        total: 0 // 总记录条数
      },
      // 数据成员
      query: {
        page: 1, // 当前页数
        // eslint-disable-next-line no-tabs
        pagesize: 10 //	页尺寸
      },

      subjectId: null, // 学科ID
      subjectlist: [], // 学科列表数据
      directoryslist: [], // 目录列表数据
      tagslist: [], // 标签列表
      choicelist: [], // 精选题库列表
      userlist: [], // 用户列表
      questionType: questionType, // 试题类型
      difficulty: difficulty, // 试题难度
      direction: direction, // 试题方向
      activeName: '4',
      provinces: [], // 所有城市
      citys: [], // 城市下地区
      chkType: chkType, // 审核状态列表
      publishType: publishType, // 发布状态

      questionDialogVisibleShow: false, // 预览对话框
      checkDialogVisible: false, // 审核对话框
      item: {},
      rowID: null // 审核参数id
    }
  },
  components: {
    'questions-preview': QuestionsPreview,
    'questions-check': QuestionsCheck
  },
  created () {
    this.getSubjectList()
    this.getChoiceList()
    this.getUsersList()
    this.getProvinces()
  },
  methods: {
    // 获取学科列表
    async getSubjectList () {
      const { data } = await getSubject({ pagesize: 20 })
      this.subjectlist = data.items
    },
    // 获取二级目录列表
    async getDirectorysList (id) {
      this.subjectId = id
      const { data } = await getDirectorys({ subjectID: id })
      this.directoryslist = data.items
      this.getTagsList()
    },
    // 获取标签列表
    async getTagsList () {
      const { data } = await getTags({ subjectID: this.subjectId })
      this.tagslist = data.items
      // this.getQuestionsList();
    },
    // 获取用户列表
    async getUsersList () {
      const { data } = await getUsers({
        page: this.page,
        pagesize: this.pagesize
      })
      this.userlist = data.list
    },

    // 获取城市省份列表
    async getProvinces () {
      this.provinces = await provinces()
    },
    // 获取城市所在区域列表
    async getCitys (item) {
      this.queryInfo.city = ''
      this.citys = await citys(item)
    },
    // 清空按钮
    clearForm () {
      this.queryInfo = {}
      this.getChoiceList()
    },
    // 搜索按钮
    async selectForm () {
      const { data } = await getChoice(this.queryInfo)
      this.choicelist = data.items
      this.queryInfo.total = data.counts
    },
    // 获取精选题库列表
    async getChoiceList () {
      const { data } = await getChoice({
        page: this.query.page,
        pagesize: this.query.pagesize,
        chkState: Number(this.activeName) > 3 ? null : Number(this.activeName)
      })
      this.choicelist = data.items
      this.queryInfo.total = data.counts
    },
    // tab栏切换
    handleClick () {
      this.getChoiceList()
    },
    // 分页
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getChoiceList()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getChoiceList()
    },
    // 预览按钮
    preivewClick (row) {
      this.item = {
        id: row.id,
        number: row.number
      }
      this.questionDialogVisibleShow = true
    },
    // 审核按钮
    checkClick (row) {
      this.rowID = row.id
      this.checkDialogVisible = true
    },
    // 下架按钮
    async publishClick (row) {
      const confirmResult = await this.$confirm(
        row.publishState === 0
          ? '您确定要下架这道题目吗?'
          : '您确定要上架这道题目吗',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult === 'confirm') {
        await choicePublish({
          id: row.id,
          publishState: row.publishState === 0 ? 1 : 0
        })
        this.getChoiceList()
      }
    },
    // 删除按钮
    async deleteClick (row) {
      const confirmResult = await this.$confirm(
        '您确定要删除这道题目吗',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult === 'confirm') {
        await choiceAdd({
          id: row.id,
          choiceState: row.publishState === 0 ? 1 : 0
        })
        this.$message.success('删除成功')
        this.getChoiceList()
      }
      // await choiceAdd({
      //   id: row.id,
      //   choiceState: row.publishState
      // });
    }
  },
  computed: {
    date () {
      return new Date()
    }
  }
}
</script>

<style scoped lang="scss">
.question-choice {
  .btn-wrap {
    margin-bottom: 15px;
    text-align: right;
  }
  .el-form-item span.text {
    text-align: right;
    vertical-align: middle;
    // float: left;
    font-size: 14px;
    color: #606266;
    padding: 0 12px 0 0;
    width: 80px;
    box-sizing: border-box;
  }
  ::v-deep .el-form-item__content {
    display: flex;
  }
  .rightFormItem {
    float: right;
  }
  .el-alert {
    margin-bottom: 15px;
  }
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
